
    <!DOCTYPE HTML>
    <html>

    <head>
        <meta charset="utf-8">
        <meta name="renderer" content="webkit|ie-comp|ie-stand">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <link rel="Bookmark" href="/favicon.ico">
        <link rel="Shortcut Icon" href="/favicon.ico" />
        <!--[if lt IE 9]>
        <script type="text/javascript" src="/admin/lib/html5shiv.js"></script>
        <script type="text/javascript" src="/admin/lib/respond.min.js"></script>
        <![endif]-->
        <link rel="stylesheet" type="text/css" href="/admin/static/h-ui/css/H-ui.min.css" />
        <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/H-ui.admin.css" />
        <link rel="stylesheet" type="text/css" href="/admin/lib/Hui-iconfont/1.0.8/iconfont.css" />
        <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/skin/default/skin.css" id="skin" />
        <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/style.css" />
        <!--[if IE 6]>
        <script type="text/javascript" src="/admin/lib/DD_belatedPNG_0.0.8a-min.js" ></script>
        <script>DD_belatedPNG.fix('*');</script>
        <![endif]-->
        <title>{{$protype_name[0] -> protype_name}}</title>

        <style>
            img{
                cursor: pointer;
            }
            .popover{
                max-width : 800px;
            }
        </style>
    </head>

    <body>
        <nav class="breadcrumb">
            <i class="Hui-iconfont">&#xe67f;</i> 首页
            <span class="c-gray en">&gt;</span> 视频管理
            <span class="c-gray en">&gt;</span>{{$protype_name[0] -> protype_name}}视频列表
            <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新">
                <i class="Hui-iconfont">&#xe68f;</i>
            </a>
        </nav>
        <div class="page-container">
            <form class="Huiform" method="post" action="/admin/course/search" target="_self">
                <div class="text-c"> 日期范围：
                    <input type="hidden" name="_token" value="{{csrf_token()}}">
                    <input type="hidden" name="protype_id" value="{{$protype_id}}">
                    <input type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}' })" id="datemin" class="input-text Wdate" name="datemin" style="width:120px;"> -
                    <input type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d' })" id="datemax" class="input-text Wdate" name="datemax" style="width:120px;">
                    <input type="text" class="input-text" style="width:250px" placeholder="输入视频名称" id="" name="key">
                    <button type="submit" class="btn btn-success" id="" name=""><i class="Hui-iconfont">&#xe665;</i> 搜索视频</button>
                </div>
            </form>
            <div class="cl pd-5 bg-1 bk-gray mt-20">
                <span class="l">
                    <a href="javascript:;" onclick="datadel()" class="btn btn-danger radius">
                        <i class="Hui-iconfont">&#xe6e2;</i> 批量删除
                    </a>
                    <a href="javascript:;" onclick="add('添加视频','/admin/course/add','800','500')" class="btn btn-primary radius">
                        <i class="Hui-iconfont">&#xe600;</i> 添加视频
                    </a>
                </span>
                <span class="r">共有数据：<strong>{{count($data)}}</strong> 条</span> </div>
            <table class="table table-border" id="table">
                <thead>
                    <tr>
                        <th scope="col" colspan="13">视频列表</th>
                    </tr>
                    <tr class="text-c">
                        <th width="5%">
                            <input type="checkbox" name="" value="">
                        </th>
                        <th width="5%">ID</th>
                        <th width="15%">视频名</th>
                        <th width="10%">所属分类</th>
                        <th width="10%">封面(竖)</th>
                        <th width="10%">封面(横)</th>
                        <th width="10%">轮播图(手机端)</th>
                        <th width="10%">轮播图(PC端)</th>
                        <th width="8%">推荐类型</th>
                        <th width="8%">视频类型</th>
                        <th width="5%">排序</th>
                        <th width="5%">状态</th>
                        <th width="15%">操作</th>
                    </tr>
                </thead>
                <tbody>
                	@foreach($data as $val)
                    <tr class="text-c">
                        <td>
                            <input type="checkbox" value="{{$val -> id}}" name="ids[]">
                        </td>
                        <td>{{$val -> id}}</td>
                        <td>
                            <a href="javascript:void(0);" title="{{$val -> description}} / {{$val -> update_number}}">
                                {{$val -> course_name}}
                                @if($val -> free == 'true')
                                    (免费)
                                @else
                                    /{{$val -> price}}
                                @endif
                            </a>
                            <span class="label label-danger radius" style="cursor: pointer;" data-toggle="popover" data-html="true" data-content="{{$val -> update_number}} <br/> 加入时间：{{$val -> created_at}} <br/> 视频拼音：{{$val -> course_name_pinyin}} <br/> 视频描述：{{$val -> description}} <br/> <span class='label label-primary radius'>评论数({{$val -> comment_num}})/点击量({{$val -> click_num}})/搜索量({{$val -> search_num}})</span> <br/>视频简介：{{$val -> course_detail}}" data-placement="bottom">
                                查看视频详情
                            </span>
                        </td>
                        <td>{{$val -> protype_name}}>{{$val -> pro_name}}</td>
                        <td><img src="{{$val -> cover_img}}" width="100" data-toggle="popover" data-html="true"  data-content="<img src='{{$val -> cover_img}}' width='350'>" data-placement="right" ></td>
                        <td>
                            @if($val -> banner_img != '')
                            <span class="label label-danger radius">
                                <img src="{{$val -> banner_img}}" width="100" data-toggle="popover" data-html="true"  data-content="<img src='{{$val -> banner_img}}' width='550'>" data-placement="bottom">
                                @if($val -> is_home_page_show == '1')
                                <br/>首页热点（mobile）
                                @endif
                            </span>
                            @endif
                        </td>
                        <td>
                            @if($val -> carousel_img != '')
                            <span class="label label-danger radius">
                                <img src="{{$val -> carousel_img}}" width="100" data-toggle="popover" data-html="true"  data-content="<img src='{{$val -> carousel_img}}' width='600'>" data-placement="bottom">
                                @if($val -> is_show_mobile == '1')
                                <br/>置顶中（mobile）
                                @endif
                            </span>
                            @endif
                        </td>
                        <td>
                            @if($val -> big_banner_img != '')
                            <span class="label label-danger radius">
                                 <img src="{{$val -> big_banner_img}}" width="100" data-toggle="popover" data-html="true"  data-content="<img src='{{$val -> big_banner_img}}' width='600'>" data-placement="bottom">
                                @if($val -> is_show_PC == '1')
                                <br/>置顶中（PC）
                                @endif
                            </span>
                            @endif
                        </td>
                        <td>
                            @if($val ->recommend_type == '0')
                                爆品
                            @elseif($val -> recommend_type == '1')
                                精品
                            @elseif($val -> recommend_type == '2')
                                新品
                            @endif
                        </td>
                        <td>
                            @if($val -> type == '0')
                                普通视频
                            @elseif($val -> type == '1')
                                培训课程
                            @elseif($val -> type == '2')
                                直播
                            @elseif($val -> type == '3')
                                会员视频
                            @endif
                        </td>
                        <td>{{$val -> sort}}</td>
                        <td class="td-status">
                            @if($val -> status == '1')
                                <span class='label radius'>已停用</span>
                            @else
                                <span class='label label-success radius'>已启用</span>
                            @endif
                        </td>
                        <td class="td-manage">
                            @if($val -> status == '1')
                                <a style='text-decoration:none' onClick='start(this,"{{$val -> id}}")' href='javascript:;' title='启用'><i class='Hui-iconfont'>&#xe615;</i></a>
                            @else
                                <a style='text-decoration:none' onClick='stop(this,"{{$val -> id}}")' href='javascript:;' title='停用'><i class='Hui-iconfont'>&#xe631;</i></a>
                            @endif
                            <a title="编辑" href="javascript:;" onclick="edit('视频编辑','/admin/course/edit','{{$val -> id}}','800','500')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a>
                            <a title="删除" href="javascript:;" onclick="del(this,'{{$val -> id}}')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6e2;</i></a>
                            <input class="btn btn-success-outline size-S radius" onClick="show_lession(this,'{{$val -> id}}')" type="button" value="查看分集">
                                <div style="height:5px;"></div>
                                <input class="btn btn-primary-outline size-S radius" onClick="layer_show('添加分集视频', '/admin/lession/add?course_id={{$val -> id}}', 800, 500);" type="button" value="添加分集">
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <!--_footer 作为公共模版分离出去-->
        <script type="text/javascript" src="/admin/lib/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="/admin/lib/layer/2.4/layer.js"></script>
        <script type="text/javascript" src="/admin/static/h-ui/js/H-ui.min.js"></script>
        <script type="text/javascript" src="/admin/static/h-ui.admin/js/H-ui.admin.js"></script>
        <!--/_footer 作为公共模版分离出去-->
        <!--请在下方写此页面业务相关的脚本-->
        <script type="text/javascript" src="/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
        <script type="text/javascript" src="/admin/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="/admin/lib/laypage/1.2/laypage.js"></script>
        <script type="text/javascript">

        function add(title, url, w, h) {
            layer_show(title, url, w, h);
        }

        function del(obj, id) {
            layer.confirm('确认要删除吗？', function(index) {
                $.ajax({
                    type: 'POST',
                    url: '/admin/course/del',
                    data: {id:id,_token:$("input[name='_token']").val()},
                    dataType: 'json',
                    success: function(data) {
                        if(data == 1){
                            $(obj).parents("tr").remove();
                            layer.msg('已删除!', { icon: 1, time: 1000 });
                        }else{
                            layer.msg('删除失败!', { icon: 2, time: 1000 });
                        }

                    },
                    error: function(data) {
                        console.log(data.msg);
                    },
                });
            });
        }

        function del_lession(obj,id){
            layer.confirm('确认要删除吗？', function(index) {
                $.ajax({
                    type: 'POST',
                    url: '/admin/lession/del',
                    data: {id:id,_token:$("input[name='_token']").val()},
                    dataType: 'json',
                    success: function(data) {
                        if(data == 1){
                            $(obj).parents("tr").remove();
                            layer.msg('已删除!', { icon: 1, time: 1000 });
                        }else{
                            layer.msg('删除失败!', { icon: 2, time: 1000 });
                        }

                    },
                    error: function(data) {
                        console.log(data.msg);
                    },
                });
            });
        }


        function edit(title, url, id, w, h) {
            layer_show(title, url + '?id=' + id, w, h);
        }

        function edit_lession(id){
            edit('编辑分集视频','/admin/lession/edit',id,800,500);
        }

        function stop(obj, id) {
            layer.confirm('确认要停用吗？', function(index) {
                //此处请求后台程序，下方是成功后的前台处理……
                $.ajax({
                    type: 'POST',
                    url: '/admin/course/edit_status',
                    data: {id:id,status:'1',_token:$("input[name='_token']").val()},
                    dataType: 'json',
                    success: function(data) {
                        if(data == 1){
                            $(obj).parents("tr").find(".td-manage").prepend('<a onClick="start(this,'+id+')" href="javascript:;" title="启用" style="text-decoration:none"><i class="Hui-iconfont">&#xe615;</i></a>');
                            $(obj).parents("tr").find(".td-status").html('<span class="label label-default radius">已禁用</span>');
                            $(obj).remove();
                            layer.msg('已停用!', { icon: 5, time: 1000 });
                        }else{
                            layer.msg('修改失败!', { icon: 2, time: 1000 });
                        }

                    },
                    error: function(data) {
                        console.log(data.msg);
                    },
                });

            });
        }


        function start(obj, id) {
            layer.confirm('确认要启用吗？', function(index) {
                //此处请求后台程序，下方是成功后的前台处理……

                $.ajax({
                    type: 'POST',
                    url: '/admin/course/edit_status',
                    data: {id:id,status:'2',_token:$("input[name='_token']").val()},
                    dataType: 'json',
                    success: function(data) {
                        if(data == 1){
                            $(obj).parents("tr").find(".td-manage").prepend('<a onClick="stop(this,'+id+')" href="javascript:;" title="停用" style="text-decoration:none"><i class="Hui-iconfont">&#xe631;</i></a>');
                            $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');
                            $(obj).remove();
                            layer.msg('已启用!', { icon: 6, time: 1000 });
                        }else{
                            layer.msg('修改失败!', { icon: 2, time: 1000 });
                        }
                    },
                    error: function(data) {
                        console.log(data.msg);
                    },
                });

            });
        }

        function show_lession(obj,id){
            if($(obj).closest('tr').next('.show_block').length  == 0){
                $.ajax({
                    type: 'GET',
                    url: '/admin/course/get_lessions',
                    data: {id:id,_token:$("input[name='_token']").val()},
                    dataType: 'json',
                    success: function(data) {
                        if(data.status == 1){
                            var lession_html = '<tr class="show_block">'+
                                    '<td scope="col" colspan="13">' +
                                    '<ul id="Huifold1" class="Huifold">'+
                                    '<li class="item">'+
                                    '<h4>'+data.info.course_name+'<b>-</b></h4>'+
                                    '<div class="info" style="display:block;">' +
                                    '<table>' +
                                    '<thead><tr><th>ID</th><th>分集名</th><th>封面(竖)</th><th>封面(横)</th><th>轮播图</th><th>视频时间(分钟)</th><th>加入时间</th><th>排序</th><th>状态</th><th>操作</th></tr></thead>'+
                                    '<tbody>' ;
                                    for(var i = 0 ; i< data.info.rel_lessions.length; i++){
                                        lession_html += '<tr>'+
                                                        '<td>'+data.info.rel_lessions[i].id+'</td>'+
                                                        '<td>'+data.info.rel_lessions[i].lession_name+'</td>'+
                                                        '<td><img src="'+data.info.rel_lessions[i].cover_img+'" width="100" data-toggle="popover" data-html="true" data-content="<img src='+data.info.rel_lessions[i].cover_img+' >" data-placement="bottom" data-original-title="" ></td>'+
                                                        '<td><img src="'+data.info.rel_lessions[i].banner_img+'"  width="100" data-toggle="popover" data-html="true" data-content="<img src='+data.info.rel_lessions[i].banner_img+' >" data-placement="bottom" data-original-title=""></td>'+
                                                        '<td><img src="'+data.info.rel_lessions[i].carousel_img+'"  width="100" data-toggle="popover" data-html="true" data-content="<img src='+data.info.rel_lessions[i].carousel_img+' >" data-placement="bottom" data-original-title=""></td>'+
                                                        '<td>'+data.info.rel_lessions[i].video_time+'</td>'+
                                                        '<td>'+data.info.rel_lessions[i].created_at+'</td>'+
                                                        '<td>'+data.info.rel_lessions[i].sort+'</td>'+
                                                        '<td>';
                                        if(data.info.rel_lessions[i].status == 2){
                                            lession_html += '<span class="label label-primary radius">已启用</span>'
                                        }else if(data.info.rel_lessions[i].status == 1){
                                            lession_html += '<span class="badge badge-danger radius">已禁用</span>'
                                        }
                                        lession_html += '</td>'+
                                                        '<td>' +
                                                        '<a title="编辑" href="javascript:;" onclick="edit_lession('+data.info.rel_lessions[i].id+')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a> <a title="删除" href="javascript:;" onclick="del_lession(this,'+data.info.rel_lessions[i].id+')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6e2;</i></a>'+
                                                        '</td>'+
                                                        '</tr>';

                                    }
                        lession_html += '</tbody>'+
                                    '</table>'+
                                    '</div>'+
                                    '</li>'+
                                    '</ul>'+
                                    '</td>'+
                                    '</tr>';
                            $(obj).closest('tr').after(lession_html);

                            $("[data-toggle='popover']").popover();
                        }else{
                            var index1 = layer.confirm('还没有分集，是否添加？', function(index) {
                                layer.close(index1);
                                layer_show('添加分集视频', '/admin/lession/add?course_id=' + id, 800, 500);
                            });
                        }
                    },
                    error: function(data) {
                        console.log(data.msg);
                    }
                });


            }else{
                return false;
            }

        }
        $(document).on('click','.item b',function(){
            console.log($(this).html());
            if($(this).html() == '+'){
                $(this).html('-');
                $(this).closest('.item').find('.info').attr('style','display:block;');
            }else if($(this).html() == '-'){
                $(this).html('+');
                $(this).closest('.item').find('.info').attr('style','display:none;');
            }

        });
        $(function(){
        	//实例化datatables
        	$('#table').dataTable({
        		//配置项
        		//禁止指定列的排序操作
        		"columnDefs": [
				    { "orderable": false, "targets": [0]}
				    //{ "orderData": [ 0, 8 ] },
				],
				//初始化默认排序字段，默认第7个字段降序排列
				"order": [[1,'desc']]
        	});
            $("[data-toggle='popover']").popover();
        });

        </script>
    </body>

    </html>